import React from 'react';
import { connect } from 'react-redux';
import { Link } from 'react-router-dom';
import {
  NavWrapper,
  BlogIndex,
  NavList,
  NavItem
} from './style';

const NavTop = (props) => {
  const { blogName, navList } = props;
  return (
    <NavWrapper>
      <BlogIndex>{ blogName }</BlogIndex>
      <NavList>
        {
          navList.map((item, index) => {
            return (
              <NavItem key={index}>
                <Link to={item.get('key')}>
                  {item.get('name')}
                </Link>
              </NavItem>
            )
          })
        }
      </NavList>
    </NavWrapper>
  );
}

const mapState = (state) => ({
  navList: state.getIn(['nav', 'navList'])
});

export default connect(mapState, null)(NavTop);